<template>
    <div class="gold-shop-wrap">
        <van-nav-bar title="收入明细" left-arrow fixed @click-left="onClickLeft" />
        <van-tabs v-model="active" @click="onClick" color="#1D69E4" title-active-color="#1D69E4">
            <van-tab title="到余额收益"></van-tab>
            <van-tab title="到卡收益"></van-tab>
        </van-tabs>
        <div class="gold_img">
            <div class="gold_price">{{ total_amount }}</div>
            <div class="gold_text">{{ active == 0 ? '到余额收益' : '到卡收益' }}</div>
        </div>
        <div class="lists">
            <div class="balance_detail_content_day" @click="dayShow = true">{{ days }}<van-icon name="arrow-down"
                    style="color: #999;" /></div>
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
                :immediate-check="false">
                <div class="team_list" v-for="(item, index) in fansList" :key="index">
                    <div class="team_list_item">
                        <div class="team_list_item_info">
                            <div>{{
                                item.remark }}</div>
                            <div>
                                {{ item.create_time }}
                            </div>
                        </div>
                        <div class="record_money">
                            <div>+{{ item.amount }}</div>
                            <!-- <div>{{ item.type_name }}</div> -->
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
        <van-calendar ref="alltime" :min-date="minDate" :max-date="maxDate" :style="{ height: '55%' }" v-model="dayShow"
            type="range" @confirm="onConfirmDay" color="#1989fa" :allow-same-day="true" />
    </div>
</template>
<script>
import { WITHDRAW_RECORD } from "@/api/mine";
import { parseTime } from '@/tool/methods'
export default {
    data() {
        const today = new Date();
        const threeMonthsAgo = new Date();
        threeMonthsAgo.setMonth(today.getMonth() - 6); // 当前日期向前推三个月
        return {
            finished: false,
            loading: false,
            page: 1,
            pageSize: 20,
            fansList: [],
            inviter_show: "",
            active: 0,
            id: this.$route.query.id,
            days: '选择日期',
            dayShow: false,
            minDate: threeMonthsAgo, // 最小日期为三个月前
            maxDate: today, // 最大日期为今天
            date: '',
            total_amount:0
        };
    },
    mounted() {
        // window.scrollTo(0, 0)
        this.onLoad()
    },
    methods: {
        onClickLeft() {
            this.$router.back();
        },
        onClick() {
            this.page = 1;
            this.fansList = [];
            this.finished = false;
            this.loading = true;
            this.days = '选择日期'
            this.dayShow = false
            this.date = ''
            this.onLoad();
            this.$refs.alltime.reset()
        },
        // 日期
        onConfirmDay(val) {
            console.log(this.date);
            this.date = parseTime(val[0], '{y}-{m}-{d}') + '-' + parseTime(val[1], '{y}-{m}-{d}')
            this.days = parseTime(val[0], '{y}-{m}-{d}') + '~' + parseTime(val[1], '{y}-{m}-{d}')
            this.dayShow = false
            this.page = 1;
            this.fansList = [];
            this.finished = false;
            this.loading = true;
            this.onLoad();
        },
        onClose() {
            this.dayShow = false
            this.days = '选择日期'
            this.date = ''
            this.page = 1;
            this.fansList = [];
            this.finished = false;
            this.loading = false;
            this.onLoad();
        },
        onLoad() {
            let params = {};
            params["page_num"] = this.page;
            params["page_size"] = this.pageSize;
            params['type'] = this.active;
            params['date_range'] = this.days == '选择日期' ? '' : this.days;
            // params['status'] = this.active;
            // /store/manage/{storeId}/income_list
            this.$http.get(`/store/manage/${this.id}/income_list`, { params: params })
                .then(res => {
                    const { list } = res.data;
                    this.total_amount = res.data.total_amount;
                    if (list && list.length) {
                        this.page++;
                        this.fansList = this.fansList.concat(list);

                        // 加载状态结束
                        this.loading = false;
                        if (list.length < this.pageSize) {
                            this.finished = true;
                        }
                    } else {
                        this.finished = true;
                    }
                })
        },
    },
};
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
    // min-height: 100vh;
    padding-top: 46px;
    background: #F2F4F5;
    min-height: calc(100vh - 46px);

    ::v-deep .van-nav-bar .van-icon {
        color: #333333;
    }

    ::v-deep .van-nav-bar__arrow {
        font-size: 20px;
    }
}

.lists {
    height: calc(100vh - 5rem);
    overflow: auto;
    background-color: #fff;
    padding-top: .32rem;
    border-radius: .32rem;
    width: 95%;
    margin: 0 auto;
    margin-top: .28rem;
    box-sizing: border-box;
}

.balance_detail_content_day {
    // min-width: 1.2rem;
    // max-width: 2rem;
    display: inline-block;
    border-radius: .36rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: .24rem;
    color: #666666;
    padding: .08rem 0;
    box-sizing: border-box;
    text-align: center;
    font-style: normal;
    border: 1px solid #8A8A8A;
    padding: 0.06rem .2rem;
    margin-left: .32rem;

    ::v-deep .van-icon {
        color: #666;
    }
}

.gold_img {
    width: 95%;
    margin: 0 auto;
    // height: 2.4rem;

    padding: .48rem 0;
    background: url('../../../images/icon_bg.png') no-repeat center;
    margin-top: .24rem;
    border-radius: .1rem;

    .gold_price {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: .64rem;
        color: #FFFFFF;
        // line-height: 45px;
        text-align: center;
    }

    .gold_text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: .28rem;
        color: #FFFFFF;
        text-align: center;
        margin-top: .16rem;
    }
}

.team_list {
    width: 100%;
    margin: 0 auto;
    // margin-top: 0.2rem;
    // border-bottom: 0.01rem solid #999;
    // border-radius: 0.16rem;
    background: #fff;
    // border-radius: .16rem;

    .team_list_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        // padding: 0.24rem 0.32rem;
        border-bottom: 1px solid #e3e3e3;
        padding: 0.2rem 0.32rem;
        margin-bottom: .1rem;

        img {
            width: 0.45rem;
            height: 0.45rem;
            margin-top: 0.2rem;
            margin-right: 0.2rem;
        }

        .team_list_item_info {
            width: 60%;
            font-size: 0.28rem;
            line-height: 0.6rem;

            div:first-child {
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 0.28rem;
                color: #333333;
                line-height: 0.4rem;
                // text-align: left;
                font-style: normal;
            }

            div:last-child {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 0.24rem;
                color: #999999;
                // line-height: 17px;

                // text-align: center;
                font-style: normal;
            }
        }

        .record_money {
            width: 30%;
            line-height: 0.6rem;
            font-size: 0.24rem;
            text-align: right;

            div {
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 0.32rem;
                color: #2CC365;
                line-height: 0.4rem;
                // text-align: center;
                font-style: normal;
            }
        }
    }
}
</style>